<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head></head>

<body>
<div>
  <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="/js/jquery.json-1.3.min.js" type="text/javascript"></script>
  
  <div id="gttctr" style="font-size:xx-small;position:absolute;top:70px;left:34px;">10</div>
  <img id="gttload" src="/img/tiny_red.gif" style="position:absolute;top:70px;left:34px;"/>
  <div id="gttscore" style="font-size:xx-small;position:absolute;top:80px;left:10px;">(o) 0:0 (x)</div>
  <img id="gttnew" src="/img/New_icons_11.gif" style="width:16px;height:8px;position:absolute;top:93px;left:28px;" onclick="javascript:newGame()"/>
  
  <img id="gttnextx" src="/img/x.gif" style="width:8px;height:8px;position:absolute;top:70px;left:50px;"/>
  <img id="gttnexto" src="/img/o.gif" style="width:8px;height:8px;position:absolute;top:70px;left:50px;"/>

  <img id="gttf1e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:4px;left:4px;" onclick="javascript:draw(1)"
    onmouseover="javascript:shadow(1,'on')" onmouseout="javascript:shadow(1,'off')"/>
  <img id="gttf2e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:4px;left:28px;" onclick="javascript:draw(2)"
    onmouseover="javascript:shadow(2,'on')" onmouseout="javascript:shadow(2,'off')"/>
  <img id="gttf3e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:4px;left:52px;" onclick="javascript:draw(3)"
    onmouseover="javascript:shadow(3,'on')" onmouseout="javascript:shadow(3,'off')"/>
  <img id="gttf4e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:28px;left:4px;" onclick="javascript:draw(4)"
    onmouseover="javascript:shadow(4,'on')" onmouseout="javascript:shadow(4,'off')"/>
  <img id="gttf5e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:28px;left:28px;" onclick="javascript:draw(5)"
    onmouseover="javascript:shadow(5,'on')" onmouseout="javascript:shadow(5,'off')"/>
  <img id="gttf6e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:28px;left:52px;" onclick="javascript:draw(6)"
    onmouseover="javascript:shadow(6,'on')" onmouseout="javascript:shadow(6,'off')" />
  <img id="gttf7e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:52px;left:4px;" onclick="javascript:draw(7)"
    onmouseover="javascript:shadow(7,'on')" onmouseout="javascript:shadow(7,'off')"/>
  <img id="gttf8e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:52px;left:28px;" onclick="javascript:draw(8)"
    onmouseover="javascript:shadow(8,'on')" onmouseout="javascript:shadow(8,'off')"/>
  <img id="gttf9e" src="/img/empty.gif" style="width:16px;height:16px;position:absolute;top:52px;left:52px;" onclick="javascript:draw(9)"
    onmouseover="javascript:shadow(9,'on')" onmouseout="javascript:shadow(9,'off')"/>
  
  <img id="gttf1x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:4px;left:4px;"/>
  <img id="gttf2x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:4px;left:28px;"/>
  <img id="gttf3x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:4px;left:52px;"/>
  <img id="gttf4x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:28px;left:4px;"/>
  <img id="gttf5x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:28px;left:28px;"/>
  <img id="gttf6x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:28px;left:52px;"/>
  <img id="gttf7x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:52px;left:4px;"/>
  <img id="gttf8x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:52px;left:28px;"/>
  <img id="gttf9x" src="/img/x.gif" style="width:16px;height:16px;position:absolute;top:52px;left:52px;"/>
  
  <img id="gttf1o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:4px;left:4px;"/>
  <img id="gttf2o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:4px;left:28px;"/>
  <img id="gttf3o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:4px;left:52px;"/>
  <img id="gttf4o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:28px;left:4px;"/>
  <img id="gttf5o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:28px;left:28px;"/>
  <img id="gttf6o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:28px;left:52px;"/>
  <img id="gttf7o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:52px;left:4px;"/>
  <img id="gttf8o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:52px;left:28px;"/>
  <img id="gttf9o" src="/img/o.gif" style="width:16px;height:16px;position:absolute;top:52px;left:52px;"/>
  
  <img id="gttgreyx1" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:4px;left:4px;"  onclick="javascript:draw(1)"/>
  <img id="gttgreyx2" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:4px;left:28px;" onclick="javascript:draw(2)"/>
  <img id="gttgreyx3" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:4px;left:52px;" onclick="javascript:draw(3)"/>
  <img id="gttgreyx4" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:28px;left:4px;" onclick="javascript:draw(4)"/>
  <img id="gttgreyx5" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:28px;left:28px;" onclick="javascript:draw(5)"/>
  <img id="gttgreyx6" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:28px;left:52px;" onclick="javascript:draw(6)"/>
  <img id="gttgreyx7" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:52px;left:4px;" onclick="javascript:draw(7)"/>
  <img id="gttgreyx8" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:52px;left:28px;" onclick="javascript:draw(8)"/>
  <img id="gttgreyx9" src="/img/xg.gif" style="width:16px;height:16px;position:absolute;top:52px;left:52px;" onclick="javascript:draw(9)"/>

  <img id="gttgreyo1" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:4px;left:4px;" onclick="javascript:draw(1)"/>
  <img id="gttgreyo2" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:4px;left:28px;" onclick="javascript:draw(2)"/>
  <img id="gttgreyo3" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:4px;left:52px;" onclick="javascript:draw(3)"/>
  <img id="gttgreyo4" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:28px;left:4px;" onclick="javascript:draw(4)"/>
  <img id="gttgreyo5" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:28px;left:28px;" onclick="javascript:draw(5)"/>
  <img id="gttgreyo6" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:28px;left:52px;" onclick="javascript:draw(6)"/>
  <img id="gttgreyo7" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:52px;left:4px;" onclick="javascript:draw(7)"/>
  <img id="gttgreyo8" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:52px;left:28px;" onclick="javascript:draw(8)"/>
  <img id="gttgreyo9" src="/img/og.gif" style="width:16px;height:16px;position:absolute;top:52px;left:52px;" onclick="javascript:draw(9)"/>

  <!--
  <div id="debug" style=";position:absolute;top:100px;left:0px;"></div>
  -->
  
  <script type="text/javascript">
  var contents = ["n", "n", "n", "n", "n", "n", "n", "n", "n"];
  var states = ["n", "n", "n", "n", "n", "n", "n", "n", "n"];
  var tohandle = null;
  var ctr = 0;
  var xscore = "";
  var oscore = "";
  var lastGameId = 0;
  var gstate = null;

  function shadow(field, onoff) {
    var id = "";
    if(gstate == null) {
        return;
    }
    if(gstate.lastDraw == "x") {
        id = "#gttgreyo" + field;
    }
    else {
        id = "#gttgreyx" + field;
    }
    if(onoff == "on") {
        $(id).fadeIn();
    }
    else {
        $(id).fadeOut();
    }
  }
  
  function newGame() {
    if(tohandle != null) {
	    window.clearTimeout(tohandle);
	    tohandle = null;
    }
    $('#gttctr').html("");
    $('#gttload').show();
    $.getJSON("/cg", {r:'001'}, onStateReturned);  
  }
  
  function draw(field) {
    if(tohandle != null) {
	    window.clearTimeout(tohandle);
	    tohandle = null;
    }
    $('#gttctr').html("");
    $('#gttload').show();
    $.getJSON("/draw", {r:'001', f:field}, onStateReturned);  
	// downloadUrl("/draw?r=001&f=" + field, "GET", "", onStateReturned);
  }

  function refresh() {
    if(tohandle != null) {
	    window.clearTimeout(tohandle);
	    tohandle = null;
    }
    ctr=ctr-1;
    if(ctr >= 0) {
    	$('#gttctr').html(ctr);
    	tohandle = window.setTimeout("refresh()", 1000);
    }
    else {
        $('#gttctr').html("");
        $('#gttload').show();
	$.getJSON("/state", {r:'001'}, onStateReturned);  
    }
  	// downloadUrl("/state?r=001", "GET", "", onStateReturned);
  }
  
  function showLastGame(state) {
    for(var j=0; j<2;j=j+1) {
        for(var i=0; i<9; i=i+1) {
            var xid = "#gttf"+(i+1)+"x";
            var oid = "#gttf"+(i+1)+"o";
            $(xid).fadeOut("slow");
            $(oid).fadeOut("slow");
        }
        for(var i=0; i<9; i=i+1) {
            var xid = "#gttf"+(i+1)+"x";
            var oid = "#gttf"+(i+1)+"o";

            if(state.states[i] == "h") {
                if(state.lastWinner == "x") {
                    $(xid).fadeIn("slow");
                }
                if(state.lastWinner == "o") {
                    $(oid).fadeIn("slow");
                }
            }
            if(state.states[i] == "l") {
                $(xid).fadeOut("slow");
                $(oid).fadeOut("slow");
            }
        }
        for(var i=0; i<9; i=i+1) {
            var xid = "#gttf"+(i+1)+"x";
            var oid = "#gttf"+(i+1)+"o";
            $(xid).fadeOut("slow");
            $(oid).fadeOut("slow");
        }
    }
  }

  function onStateReturned(state) {
        gstate = state;
        $("#debug").html($.toJSON(state));

        if(state.gameId != lastGameId) {
            showLastGame(state);
            lastGameId = state.gameId;
        }
        for(var i=0; i<9; i=i+1) {
                var xid = "#gttf"+(i+1)+"x";
                var oid = "#gttf"+(i+1)+"o";

                if(contents[i] != state.contents[i]) {  				
                        $(xid).fadeOut("normal");
                        $(oid).fadeOut("normal");

                        if(state.contents[i] == "x") {
                                $(xid).fadeIn("normal");
                        }
                        if(state.contents[i] == "o") {
                                $(oid).fadeIn("normal");
                        }

                        contents[i] = state.contents[i];
                }
        }
                  
        $('#gttload').hide();
	ctr = 10;
	$('#gttctr').html(ctr);
        $('#gttscore').html("(o) " + state.oscore + ":" + state.xscore + " (x)");
        
        if(state.lastDraw == "x") {
            $('#gttnexto').fadeIn("normal");
            $('#gttnextx').fadeOut("normal");
        }
        else {
            $('#gttnextx').fadeIn("normal");
            $('#gttnexto').fadeOut("normal");
        }
	  		
  	tohandle = window.setTimeout("refresh()", 1000);
  }
  
  $(document).ready(function(){
        $("gttload").hide();
  	for(var i=1; i<=9; i=i+1) {
  		var xid = "#gttf"+i+"x";
  		var oid = "#gttf"+i+"o";
  		var xgid = "#gttgreyx"+i;
  		var ogid = "#gttgreyo"+i;
		$(xid).hide();
		$(oid).hide();				
		$(xgid).hide();
		$(ogid).hide();
  	}
  	refresh();  
  });  
  </script>
</div>

</body> </html>
